﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Language" content="zh-cn" /> 
<title>商品详细</title>
<link href="../css/global.css" rel="stylesheet" type="text/css" />
<link href="../css/shop.css" rel="stylesheet" type="text/css" />
<link href="../css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/sidebar_slide.js"></script>
<script type="text/javascript" src="../js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
    $(function() {
        $('#gallery a').lightBox();
    });
    </script>
   	<style type="text/css">
	/* jQuery lightBox plugin - Gallery style */
	#gallery {padding:10px;width:680px;margin:10px 0px;}
	#gallery ul{ padding:0;}
	#gallery ul li { float:left; display:inline;  margin:0 14px 0 0;;}
	#gallery ul img {border:2px solid #CCC; padding:2px;}
	#gallery ul a:hover img {border:2px solid #B9D300; padding:2px; width:72px; height:72px;}
	#gallery ul a:hover {color: #fff;}
	</style>
<!--[if IE 6]>
<script src="../js/DD_belatedPNG.js"></script>
<script>
	DD_belatedPNG.fix('.hd_search,.index_promo .channels .intro i');
</script>
<![endif]--> 
</head>
<body>
<div id="container">
	<div id="header">
		<h1 class="logo"><a href="#" title="Idolgo 爱捣鼓"><img src="../images/logo.png" alt="Idolgo 爱捣鼓" width="250" height="74" /></a></h1>
		<ul class="toor_bar">
			<li class="search has_sub">
				<a href="javascript:void(0)" class="sub_hd"><i></i>搜索</a>
				<div class="sub">
					<form action="#" class="hd_search">
						<input type="text" name="" class="keyword" value="T恤"/>
						<button type="submit" class="submit_btn">搜索</button>
					</form>
				</div>
			</li>
			<li class="cart has_sub">
				<a href="#"><i></i>购物车(3)</a>
				<div class="sub">
					<div class="hd_cart">
							<div class="cart_bg_hd"></div>
							<div class="cart_bg_md">
								<h3 class="cart_title">你的订单中共有<span>3</span>件商品</h3>
								<ul class="catr_list">
									<li><a href="###">古典印花古装图案T恤</a><span>编号：007</span></li>
									<li><a href="###">古典印花古装图案T恤</a><span>编号：007</span></li>
									<li><a href="###">古典印花古装图案T恤</a><span>编号：007</span></li>
								</ul>
								<p class="cart_btn"><a href="">去查看订单</a></p>
							</div>
							<div class="cart_bg_ft"></div>
					</div>
				</div>
			</li>
			<li class="login has_sub logined">
				<a href="#"><img src="../images/temporary/img25.png" alt="邪恶的圆" />消费者甲<em></em></a>
			</li>
			<li class="registered"><a href="#"><i></i><span>2</span></a></li>
		</ul>
		<ul class="nav">
			<li>
				<a href="javascript:void(0)">coolpie首页<b></b></a>
			</li>
			<li>
				<a href="javascript:void(0)">商品分类<b></b></a>
				<div class="sub_menu">
					<ul>
						<li><a href="#">服饰商品</a></li>
						<li><a href="#">电子商品</a></li>
						<li><a href="#">日用百货</a></li>
						<li><a href="#">其他商品</a></li>
					</ul>
					<b></b>
				</div>
			</li>
			<li>
				<a href="javascript:void(0)">关于coolpie<b></b></a>
			</li>
		</ul>
	</div>

	<div id="main">
		<div class="layout_c2">
			<div class="col_main">
				<div class="mod_box product_detail">
					<div class="hd">
						<h3>商品详细信息</h3>
					</div>
					<div class="bd clearfix">
						<div class="gallery">
							<div class="item_img">
								<div class="jqzoom">
								<!--需要2种规格的图片 大图地址写在img 的jqimg里头 小图写在img src里头-->
									<img src="../images/temporary/img19.jpg" alt="产品" width="375" height="320" jqimg="../images/temporary/img19_big.jpg" id="product_big_img"/>
								</div>
							</div>
						</div>
						<div class="property">
							<div class="property_hd">
								<h4 class="tit">可爱的CC懒人T恤</h4>
								<!--<span class="star_grade" title="4.5分"><span class="star_grade_point" style="width:90%;" ></span></span>-->
							</div>
							<form method="" action="" name="">
								<ul class="meta">
									<li class="itm">
										<span class="t">产品编号：</span>
										<span>008833xxp</span>
									</li>
									<li>
										<span class="t">上传时间：</span>
										<span>2011.12.25</span>
									</li>
									<li>
										<span class="t">价格：</span>
										<span class="cur_price">￥939</span>
									</li>
									<li>
										<span class="t">购买数量：</span><input type="text" name="num" class="num_style" />商品库存：4333
									</li>
									<li>
										<span class="t">评价：</span>
										<span>已有<a href="###" class="comment_num">333人</a>评价</span>
									</li>
								</ul>
							
								<ul class="meta buy_info">
									<li><p class="sum">本商品有黑色、白色、棕色三种颜色。本商品有大码、中码、小码三种尺寸。</p></li>
									<li>
										<span class="t">选择规则：</span>
										<input type="text" name="form" class="form_style" />
									</li>
								</ul>
							</form>
							<div class="buy_btns">
								<a href="#" class="btn btn_cart">放入购物车</a>
								<a href="#" class="btn btn_add">立即购买</a>
							</div>
						</div>
					</div>
				</div>
				<div class="mod_comment">
					<div class="hd">
						2条评论
					</div>
					<div class="bd">
						<div class="comment_list">
							<div class="comment_itm">
								<a href="#" class="img"><img src="../images/temporary/img5.jpg" alt="user" width="55" height="55"/></a>
								<div class="comment_con">
									<div class="origin_comment">
										<div class="ctn">内容内容内容内容内容内容内容内容</div>
										<div class="comment_ft">
											<span class="fl">14分钟前</span>
										</div>
										<b class="arrow"></b>
									</div>
								</div>
							</div>
							<div class="comment_itm">
								<a href="#" class="img"><img src="../images/temporary/img5.jpg" alt="user" width="55" height="55"/></a>
								<div class="comment_con">
									<div class="origin_comment">
										<div class="ctn">内容内容内容内容内容内容内容内容</div>
										<div class="comment_ft">
											<span class="fl">14分钟前</span>
										</div>
										<b class="arrow"></b>
									</div>
								</div>
							</div>
						</div>
						<div class="comment_publish">
							<h4 class="mod_hd_tit">在这里写下您对这个作品的想法和大家分享吧~</h4>
							<div class="mod_comment_publisher">
								<textarea>我觉得..</textarea>
								<div class="submit_wrap">
									<a href="#" class="submit_btn">发表</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			
			<div class="col_sub">				
				<div class="mod_box hot_pd">
					<div class="hd">
						<h3>热门产品</h3>
					</div>
					<div class="bd clearfix">
						<ul class="hot_list">
							<li>
								<h4 class="cur">1 可爱小XX懒人T恤<em></em></h4>
								<div class="cnt_hide">
									<a href="#" class="img"><img src="../images/temporary/img5.jpg" alt="可爱的XX懒人T恤" /></a>
									<div class="info">
										<p>商家<a href="###">邪恶的圆</a></p>
										<p class=""><span class="sale">销量：99</span></p>
										<p class=""><span class="price">价格：99</span></p>
									</div>
								</div>
							</li>
							<li>
								<h4>2 可爱小XX懒人T恤<em></em></h4>
								<div class="cnt_hide" style="display:none;">
									<a href="#" class="img"><img src="../images/temporary/img5.jpg" alt="可爱的XX懒人T恤" /></a>
									<div class="info">
										<p>商家<a href="###">邪恶的圆</a></p>
										<p class=""><span class="sale">销量：99</span></p>
										<p class=""><span class="price">价格：99</span></p>
									</div>
								</div>
							</li>
							<li>
								<h4>3 可爱小XX懒人T恤<em></em></h4>
								<div class="cnt_hide" style="display:none;">
									<a href="#" class="img"><img src="../images/temporary/img5.jpg" alt="可爱的XX懒人T恤" /></a>
									<div class="info">
										<p>商家<a href="###">邪恶的圆</a></p>
										<p class=""><span class="sale">销量：99</span></p>
										<p class=""><span class="price">价格：99</span></p>
									</div>
								</div>
							</li>
							<li class="none_border_bottom">
								<h4>4 可爱小XX懒人T恤<em></em></h4>
								<div class="cnt_hide" style="display:none;">
									<a href="#" class="img"><img src="../images/temporary/img5.jpg" alt="可爱的XX懒人T恤" /></a>
									<div class="info">
										<p>商家<a href="###">邪恶的圆</a></p>
										<p class=""><span class="sale">销量：99</span></p>
										<p class=""><span class="price">价格：99</span></p>
									</div>
								</div>
							</li>
                            <li class="none_border_bottom">
								<h4>4 可爱小XX懒人T恤<em></em></h4>
								<div class="cnt_hide" style="display:none;">
									<a href="#" class="img"><img src="../images/temporary/img5.jpg" alt="可爱的XX懒人T恤" /></a>
									<div class="info">
										<p>商家<a href="###">邪恶的圆</a></p>
										<p class=""><span class="sale">销量：99</span></p>
										<p class=""><span class="price">价格：99</span></p>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
<script type="text/javascript">inn_toggle(".hot_pd");</script>

				<div class="mod_box hot_cmt">
					<div class="hd">
						<h3>热评产品</h3>
					</div>
					<div class="bd clearfix">
						<ul class="hot_list">
							<li>
								<h4 class="cur">1 可爱小XX懒人T恤<em></em></h4>
								<div class="cnt_hide">
									<a href="#" class="img"><img src="../images/temporary/img5.jpg" alt="可爱的XX懒人T恤" /></a>
									<div class="info">
										<p>商家<a href="###">邪恶的圆</a></p>
										<p class=""><span class="sale">销量：99</span></p>
										<p class=""><span class="price">价格：99</span></p>
									</div>
								</div>
							</li>
							<li>
								<h4>2 可爱小XX懒人T恤<em></em></h4>
								<div class="cnt_hide" style="display:none;">
									<a href="#" class="img"><img src="../images/temporary/img5.jpg" alt="可爱的XX懒人T恤" /></a>
									<div class="info">
										<p>商家<a href="###">邪恶的圆</a></p>
										<p class=""><span class="sale">销量：99</span></p>
										<p class=""><span class="price">价格：99</span></p>
									</div>
								</div>
							</li>
							<li>
								<h4>3 可爱小XX懒人T恤<em></em></h4>
								<div class="cnt_hide" style="display:none;">
									<a href="#" class="img"><img src="../images/temporary/img5.jpg" alt="可爱的XX懒人T恤" /></a>
									<div class="info">
										<p>商家<a href="###">邪恶的圆</a></p>
										<p class=""><span class="sale">销量：99</span></p>
										<p class=""><span class="price">价格：99</span></p>
									</div>
								</div>
							</li>
							<li class="none_border_bottom">
								<h4>4 可爱小XX懒人T恤<em></em></h4>
								<div class="cnt_hide" style="display:none;">
									<a href="#" class="img"><img src="../images/temporary/img5.jpg" alt="可爱的XX懒人T恤" /></a>
									<div class="info">
										<p>商家<a href="###">邪恶的圆</a></p>
										<p class=""><span class="sale">销量：99</span></p>
										<p class=""><span class="price">价格：99</span></p>
									</div>
								</div>
							</li>
                            <li class="none_border_bottom">
								<h4>4 可爱小XX懒人T恤<em></em></h4>
								<div class="cnt_hide" style="display:none;">
									<a href="#" class="img"><img src="../images/temporary/img5.jpg" alt="可爱的XX懒人T恤" /></a>
									<div class="info">
										<p>商家<a href="###">邪恶的圆</a></p>
										<p class=""><span class="sale">销量：99</span></p>
										<p class=""><span class="price">价格：99</span></p>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
<script type="text/javascript">inn_toggle(".hot_cmt");</script>

				<div class="mod_box pdt">
					<a href="#"><img src="../images/temporary/img8.png" alt="可爱的XX懒人沙发" /></a>
					<a href="#"><img src="../images/temporary/img9.png" alt="可爱的XX懒人沙发" /></a>
				</div>
			</div>
		</div>
	</div>

	<div id="footer">
		<p class="copyright">Copyright idolgo.com 2011 ICP证：XXXXXXXXXXXX </p>
		<ul class="links">
			<li><a href="#">首页</a></li>
			<li><a href="#">商城</a></li>
			<li><a href="#">酷派介绍</a></li>
			<li><a href="#">订单</a></li>
			<li><a href="#">社区</a></li>
			<li><a href="#">加入CoolPie</a></li>
			<li><a href="#">发起项目</a></li>
			<li><a href="#">F&Q</a></li>
			<li><a href="#">联系我们</a></li>
			<li><a href="#">参与项目</a></li>
			<li><a href="#">酷派攻略</a></li>
			<li><a href="#">隐私声明</a></li>
		</ul>
	</div>

</div>
<script type="text/javascript">
	//导航子菜单
	$('#header .nav>li').hover(function(){
			$('.sub_menu',$(this)).stop(true,true).slideDown(150);
		},
		function(){
			$('.sub_menu',$(this)).stop(true,true).slideUp(150);
		}
	);
	//头部链接子菜单显示
	$('#header .toor_bar .has_sub').hover(function(){
			$(this).addClass('on');
			$('.sub_hd',$(this)).addClass('on');
		},
		function(){
			$(this).removeClass('on');
			$('.sub_hd',$(this)).removeClass('on');
		}
	);

	var hideSearchTxt = function(inputObj){
			var originValue=$(inputObj).val();
			$(inputObj).focus(function () {
				if($(this).val()== originValue){
					$(this).val('');
				}
			});
			$(inputObj).blur(function () {
				if($.trim($(this).val()) == ''){
					$(this).val(originValue);
				}
			});
		};
		hideSearchTxt('.hd_search .keyword');
		
		//
		$('.new_recomend_list li').hover(function(){
			$(this).addClass('on');
		},
		function(){
			$(this).removeClass('on');
		}
	);
</script>
<script type="text/javascript" src="../js/jquery.slide.js"></script>
<script type="text/javascript" src="../js/jquery.jqzoom.js"></script>
<script type="text/javascript" src="../js/shop_detail.js"></script>
</body>
</html>
